import React from "react";
import Admin from "../../../layout/Admin";
import {Button, Input, Modal} from "antd";
import Info from "../../../service/info";
import BasketballModel from "../../../model/basketball";

class BasketballGameList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            modal: {
                hot: false,
            },
            hot: [],
            hotEvent: '',
        }
        this.model = new BasketballModel()
    }

    componentDidMount() {
        this.hot()
    }

    hot() {
        this.model
            .hot()
            .then(res => {
                this.setState({
                    hot: res.data.ok.lq,
                })
            })
    }

    addHotEvent = () => {
        const event = this.state.hotEvent
        const hot = this.state.hot
        hot.push(event)
        this.setState({
            hot: [...hot,],
            hotEvent: '',
        })
    }

    deleteHotEvent = (index) => {
        const hot = this.state.hot
        hot.splice(index, 1)
        this.setState({
            hot: [...hot,],
        })
    }

    submitHot = () => {
        const hot = this.state.hot
        this.model.setHot({
            Games: hot,
        }).then(res => {
            if (res.data.ok) {
                Info.success('编辑成功')
            }
        }).then(() => {
            this.setState({
                hotEvent: '',
                modal: {
                    ...this.state.modal,
                    hot: false,
                }
            })
        }).then(() => this.hot())
    }

    modalControl = (key, value) => {
        this.setState({
            modal: {
                ...this.state.modal,
                [key]: value,
            }
        })
    }


    render() {

        const hotModal = <Modal
            visible={this.state.modal.hot}
            onCancel={() => this.modalControl('hot', false)}
            title='篮球重要赛事'
            onOk={() => this.submitHot()}
        >
            {this.state.hot.map((event, index) => {
                return <div style={{width: '100%', marginBottom: '8px', display: 'flex', justifyContent: 'space-between',}} key={index}>
                    <span>{event}</span>
                    <Button
                        onClick={() => this.deleteHotEvent(index)}
                    >
                        删除
                    </Button>
                </div>
            })}
            <div style={{display: 'flex',}}>
                <Input
                    value={this.state.hotEvent}
                    onChange={e => this.setState({hotEvent: e.target.value,})}
                    placeholder='输入重要赛事名称'
                />
                <Button
                    onClick={this.addHotEvent}
                >
                    添加
                </Button>
            </div>

        </Modal>

        return <>
            {hotModal}
            <Admin>
                <div className='list-container'>
                    <Button
                        style={{marginRight: '8px',}}
                        onClick={() => this.modalControl('hot', true)}
                    >
                        编辑重要赛事
                    </Button>
                </div>

            </Admin>
        </>
    }
}

export default BasketballGameList